import styles from './index.module.less'
import logo from '../../assets/1.png'
import { Button, Input, Form } from 'react-vant'
import axios from '../../api'//引入已经配置好的axios
import toast from 'react-hot-toast';
import { useNavigate } from 'react-router-dom';//用于跳页面
export default function Register() {
    const [form] = Form.useForm()
    const navigate = useNavigate()
    const onFinish =async values => {
        //'/user/login'表示url参数
        // （因为在axios.defaults.baseURL='http://localhost:3000'中已经设置了基础URL，所以这里只需要写相对路径），
        // values表示请求体（Request Body）
        const res=await axios.post('/user/register', values)
        toast.success(res.msg)//响应拦截器中已经处理了异常情况，所以这里不需要再处理
        setTimeout(() => {
            // navigate(`/login?username=${values.username}&password=${values.password}`)
            navigate('/login',{
                state:{
                    username:values.username,
                    password:values.password
                }
            })
        }, 1000);
    }
    return (
        <div className={styles.login}>
            <h1 className={styles.title}>注册</h1>
            <div className={styles['login-wrapper']}>
                <div className={styles.avatar}>
                    <img className={styles['avatar-img']} src={logo} alt="logo" />
                </div>
                <Form
                    form={form}
                    onFinish={onFinish}//form表单的提交事件
                    footer={
                        <div style={{
                            margin: '16px 16px 0',
                            '--rv-button-primary-background-color': ' pink',
                            '--rv-button-primary-border-color': 'pink'
                        }}>
                            <Button round nativeType='submit' type='primary' block>
                                注册
                            </Button>
                        </div>
                    }
                >
                    <Form.Item
                        labelWidth={50}
                        rules={[{ required: true, message: '请填写用户名' }]}
                        name='username'
                        label='用户名'
                    >
                        <Input placeholder='请输入用户名' />
                    </Form.Item>
                    <Form.Item
                        labelWidth={50}
                        rules={[{ required: true, message: '请填写密码' }]}
                        name='password'
                        label='密码'
                    >
                        <Input placeholder='请输入密码' />
                    </Form.Item>
                    <Form.Item
                        labelWidth={50}
                        rules={[{ required: true, message: '请填写昵称' }]}
                        name='nickname'
                        label='昵称'
                    >
                        <Input placeholder='请输入昵称' />
                    </Form.Item>
                </Form>
            </div>
            <p className={styles['login-tip']}
                onClick={() => {
                    navigate('/login')
                }}
            >
                已经有账号?点这里登录
            </p>
        </div>
    )
}
